<template>
	<view class="chatRoom">
		<MessageItem v-for="item in msgList" :key="item.id" :content="item" />
		<view class="bottom-region">
			<input type="text" v-model="msgText" class="chat-box" maxlength="200" placeholder="发送消息…" placeholder-style="color: #434254; fontSize: 28upx ">
			<view class="send" @click="handleSend">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	import MessageItem from './components/MessageItem'
	import {
		apiUserMsgList,
		apiSendMsg
	} from '@/api/message'
	export default {
		components: {
			MessageItem
		},
		data() {
			return {
				HistoryMsgList: [],
				msgList: [],
				msgText: '',
				sendMsgTime: '',
				toUserId: '',
				timer: '',
				
				id: null
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getMessage('history')
			}, 100);
		},
		onLoad: function(option) {
			uni.setNavigationBarTitle({
				title: option.userName
			})
			this.toUserId = option.id
		},
		onShow() {
			// 获取消息
			this.getMessage('new')
			this.setTimer()
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			setTimer() {
				this.timer = setInterval(()=> {
					this.getMessage('timer')
				}, 6000)
			},
			getMessage(type) {
				if(type != 'timer') {
					uni.showLoading()
				}
				if(type == 'new' || type == 'timer') {
					if( this.msgList.length > 0) {
						this.id = this.msgList[this.msgList.length-1].id
					}
					let requestObj = {
						to_user_id: this.toUserId,
						operator: '>'
					}
					if(this.id) requestObj.id = this.id
					apiUserMsgList( requestObj ).then( res => {
						let dataList = res.data.data
						this.msgList = this.handleTime(this.msgList.concat(dataList))
						if( type == 'new' ){
							this.roll()
						}
						uni.hideLoading()
					}).catch( err => {
						uni.hideLoading()
					})
				} else {
					if( this.msgList.length > 0) {
						this.id = this.msgList[0].id
					}
					let requestObj = {
						to_user_id: this.toUserId,
						operator: '<'
					}
					if(this.id) requestObj.id = this.id
					apiUserMsgList( requestObj ).then( res => {
						let dataList = res.data.data
						setTimeout(function () {
							uni.stopPullDownRefresh();
						}, 200);
						this.msgList = this.handleTime(dataList.concat(this.msgList))
						uni.hideLoading()
					}).catch( err => {
						uni.hideLoading()
					})
				}
			},
			handleTime(dataList) {
				this.sendMsgTime = ''
				return dataList.map((item, index) => {
					if (this.sendMsgTime == '') {
						// 消息是否显示时间
						this.sendMsgTime = item.created_at
						item.showTime = true
					} else {
						let lastTime = new Date(this.sendMsgTime.replace(/-/g,'/')).getTime()
						let currentTime = new Date(item.created_at.replace(/-/g,'/')).getTime()
						let difference = currentTime - lastTime
				
						if (difference > (60 * 3 * 1000)) {
							this.sendMsgTime = item.created_at
							item.showTime = true
						} else {
							item.showTime = false
						}
					}
					let myId = uni.getStorageSync('userinfo').id
					item.identity = (item.user_id == myId ? 'me' : 'others')
					return item
				})
			},
			handleSend() {
				if (this.msgText.trim() != '') {
					apiSendMsg({
						to_user_id: this.toUserId,
						content: this.msgText
					}).then((res) => {
						this.getMessage('new')
						this.roll()
					})
					this.msgText = ''
				} else {
					uni.showToast({
						title: '发送内容不能为空，请重新输入。',
						duration: 1000,
						icon: 'none'
					})
				}
			},
			roll(distance) {
				setTimeout( ()=> {
					const { screenHeight } = uni.getSystemInfoSync()
					uni.pageScrollTo({
					    scrollTop: distance ? (screenHeight + distance) : (screenHeight + 500),
					    duration: 50
					})
				}, 50)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chatRoom {
		padding-bottom: 186upx;

		.bottom-region {
			background-color: #0C0B18;
			position: fixed;
			bottom: 0;
			height: 166upx;
			width: 100%;
			box-sizing: border-box;
			border-top: 2upx solid #1C1B2B;
			padding: 18upx 24upx 0upx 26upx;
			display: flex;
			justify-content: space-between;

			.chat-box {
				width: 488upx;
				height: 80upx;
				background-color: #1C1B2B;
				padding-left: 18upx;
				margin-right: 20upx;
			}

			.send {
				width: 192upx;
				height: 80upx;
				background: linear-gradient(22deg, #863B8D 0%, #F01332 100%);
				text-align: center;
				font-size: 28upx;
				color: #fff;
				line-height: 80upx;
				border-radius: 4px;
			}
		}
	}
</style>
